<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue 的生命周期</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  </head>
  <body>
    <h4>Vue 的生命周期练习</h4>
    <div id="app">
      <blog-post
        v-for="post of posts"
        :key="post.id"
        :post="post"
        @getdata="getChildData"
      ></blog-post>
      <div>接收到的数据：{{counter}}</div>
      <!-- <my-child @hook:mounted="getMountedData"></my-child> -->
    </div>

    <script>
      var myChild = {
        template: `
          <div>子组件</div>
        `,
        mounted() {
          console.log('子组件触发 mounted 钩子函数 ...');
          this.$emit('mounted')
        }
      }
      var blogPost = {
        props: ["post"],
        data: function() {
          return {
            counter: 0
          };
        },
        methods: {
          sendChildData() {
            this.counter++;
            this.$emit('getdata', this.counter)
          }
        },
        template: `
        <div>
          <div class="blog-post">
            <h3>{{ post.title }}</h3>
            <div v-html="post.content"></div>
          </div>
          <button @click="sendChildData">You clicked me {{ counter }} times.</button>
        </div>`,
        beforeCreate() {
          console.log("<---CHILD--->");
          console.log("beforeCreate: init(事件)");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        created() {
          console.log("<---CHILD--->");
          console.log("created:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeMount() {
          console.log("<---CHILD--->");
          console.log("beforeMount:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        mounted() {
          console.log("<---CHILD--->");
          console.log("mounted:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeUpdate() {
          console.log("<---CHILD--->");
          console.log("beforeUpdate:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        updated() {
          console.log("<---CHILD--->");
          console.log("updated:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeDestroy() {
          console.log("<---CHILD--->");
          console.log("beforeDestroy:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        destroyed() {
          console.log("<---CHILD--->");
          console.log("destroyed:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        }
      };
      new Vue({
        el: "#app",
        data: {
          count: 0,
          posts: [
            { id: 1, title: "My journey with Vue" },
            // { id: 2, title: "Blogging with Vue" },
            // { id: 3, title: "Why Vue is so fun" }
          ],
          counter: 0
        },
        components: {
          blogPost,
          myChild
        },
        methods: {
          getChildData(data) {
            console.log('接收子组件的数据', data)
            this.counter = data
          },
          getMountedData() {
            console.log('父组件监听到 mounted 钩子函数 ...')
          }
        },
        beforeCreate() {
          console.log("<---PARETN--->");
          console.log("beforeCreate: init(事件)");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        created() {
          console.log("<---PARETN--->");
          console.log("created:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeMount() {
          console.log("<---PARETN--->");
          console.log("beforeMount:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        mounted() {
          console.log("<---PARETN--->");
          console.log("mounted:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeUpdate() {
          console.log("<---PARETN--->");
          console.log("beforeUpdate:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        updated() {
          console.log("<---PARETN--->");
          console.log("updated:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        beforeDestroy() {
          console.log("<---PARETN--->");
          console.log("beforeDestroy:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        },
        destroyed() {
          console.log("<---PARETN--->");
          console.log("destroyed:");
          console.log("$el: ", this.$el);
          console.log("data: ", this.$data ? '有值' : undefined);
        }
      });
    </script>
  </body>
</html>
